<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org"
      xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity5">
<head>
    <meta charset="UTF-8">
    <meta name="referrer" content="no-referrer"/>
    <link rel="stylesheet" type="text/css" href="/static/layui/css/layui.css">
    <link rel="stylesheet" href="/static/css/loading-icon.css">
    <link rel="stylesheet" type="text/css" href="/static/css/Common.css">
    <title>客户信息</title>
</head>
<body>
<div class="sk-three-bounce" id="sk-three-bounce" style="display: none">
    <div class="sk-child sk-bounce1"></div>
    <div class="sk-child sk-bounce2"></div>
    <div class="sk-child sk-bounce3"></div>
</div>
<div style="width: 100%;height: 100%;padding: 0;margin: 0" id="main_viewer">
    <div>
        <div style="margin-top: 3px" id="increase" class="layui-btn layui-btn-warm layui-btn-sm"
             sec:authorize="hasAnyRole('manager','admin')">增加</div>
        <table lay-filter="demo" id="demo">
            <thead>
            <tr>
                <th lay-data="{field:'client_id',sort:true}">用户ID</th>
                <th lay-data="{field:'client_name',sort:true}">用户名</th>
                <th lay-data="{field:'tel'}">电话</th>
                <th lay-data="{field:'age',sort:true}">年龄</th>
                <th lay-data="{field:'client_password',sort:true}" sec:authorize="hasRole('admin')">密码</th>
                <th lay-data="{field:'email'}">email</th>
                <th lay-data="{width:200, toolbar:'#barDemo'}" sec:authorize="hasAnyRole('manager','admin')">操作</th>
            </tr>
            </thead>
            <tbody>
            <tr th:each="record:${results}">
                <td th:text="${record.client_id}">用户ID</td>
                <td th:text="${record.client_name}">用户名</td>
                <td th:text="${record.tel}">电话</td>
                <td th:text="${record.age}">年龄</td>
                <td th:text="${record.client_password}" sec:authorize="hasRole('admin')">密码</td>
                <td th:text="${record.email}">email</td>
            </tr>
            </tbody>
        </table>
    </div>
</div>
<div id="flow_block" class="layui-form" style="display: none">
    <form method="post" class="layui-form layui-form-pane" style="margin: 10px" action="/addClient">
        <div class="layui-form-item">
            <label class="layui-form-label">用户ID</label>
            <div class="layui-input-inline">
                <input type="number" class="layui-input" lay-verify="required|number" name="client_id">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">用户名</label>
            <div class="layui-input-inline">
                <input type="text" class="layui-input" lay-verify="required" name="client_name">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">电话</label>
            <div class="layui-input-inline">
                <input type="text" class="layui-input" lay-verify="required" name="tel">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">年龄</label>
            <div class="layui-input-inline">
                <input type="number" class="layui-input" lay-verify="required|number" name="age">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">密码</label>
            <div class="layui-input-inline">
                <input type="text" class="layui-input" lay-verify="required" name="client_password">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">email</label>
            <div class="layui-input-inline">
                <input type="text" class="layui-input" lay-verify="required" name="email">
            </div>
        </div>
        <div class="layui-form-item" style="text-align: center">
            <input type="submit" value="保存" class="layui-btn layui-btn-normal">
        </div>
    </form>
</div>
<div id="flow_block2" class="layui-form" style="display: none">
    <form method="post" class="layui-form layui-form-pane" style="margin: 10px" action="/updateClient">
        <div class="layui-form-item">
            <label class="layui-form-label">用户ID</label>
            <div class="layui-input-inline">
                <input type="number" class="layui-input" lay-verify="required|number" name="client_id" id="client_id">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">用户名</label>
            <div class="layui-input-inline">
                <input type="text" class="layui-input" lay-verify="required" name="client_name" id="client_name">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">电话</label>
            <div class="layui-input-inline">
                <input type="text" class="layui-input" lay-verify="required" name="tel" id="tel">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">年龄</label>
            <div class="layui-input-inline">
                <input type="number" class="layui-input" lay-verify="required|number" name="age" id="age">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">密码</label>
            <div class="layui-input-inline">
                <input type="text" class="layui-input" lay-verify="required" name="client_password" id="client_password">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">email</label>
            <div class="layui-input-inline">
                <input type="text" class="layui-input" lay-verify="required" name="email" id="email">
            </div>
        </div>
        <div class="layui-form-item" style="text-align: center">
            <input type="submit" value="保存" class="layui-btn layui-btn-normal">
        </div>
    </form>
</div>
<script type="text/javascript" src="/static/js/jquery-3.4.1.js"></script>
<script type="text/javascript" src="/static/layui/layui.js"></script>
<script type="text/javascript" src="/static/js/LoadingJS.js"></script>
<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-sm" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-sm" lay-event="del">删除</a>
</script>
<script>
    var table = layui.table;

    //转换静态表格
    table.init('demo', {
        limit: 8 //注意：请务必确保 limit 参数（默认：10）是与你服务端限定的数据条数一致
        //支持所有基础参数
        ,page:true
        ,limits: [8,16,24,32,40,48,56,64,72]
    });
</script>
<script type="text/javascript" src="/static/js/ClientViewer.js"></script>
</body>
</html>

